<template>
  <view class="express-container">
    <template v-if="!none">
      <view class="express-header">
        <view class="header-content">
          <text class="title">{{ com }}</text>
          <!-- <text class="status">已签收</text> -->
        </view>
        <view class="header-subtitle">{{ nu }}</view>
      </view>

      <!-- Current Status -->
      <!-- <view class="current-status">
        <view class="status-icon">
          <text class="icon">✓</text>
        </view>
        <view class="status-content">
          <text class="status-desc">已暂存至快递点</text>
          <text class="status-address">南宁良庆五象丽景小兵店</text>
        </view>
      </view> -->

      <!-- Timeline -->
      <view class="timeline">
        <view v-for="(item, index) in expressData" :key="index" class="timeline-item"
          :class="{ 'active': index === 0 }">
          <view class="timeline-dot"></view>
          <view class="timeline-content">
            <text class="time">{{ formatTime(item.time) }}</text>
            <view class="content" @tap="toggleExpand(index)">
              <text>{{ item.context }}</text>
              <text class="expand-icon" v-show="hasContactInfo(item.context)">{{ expandedIndex === index ? '▲' : '▼' }}</text>
            </view>
            <view class="contact-info" v-if="expandedIndex === index && hasContactInfo(item.context)">
              <view class="contact-item" v-if="extractPhone(item.context)">
                <text class="icon">📞</text>
                <text>{{ extractPhone(item.context) }}</text>
              </view>
              <view class="contact-item" v-if="extractAddress(item.context)">
                <text class="icon">📍</text>
                <text>{{ extractAddress(item.context) }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- Contact Information -->
      <!-- <view class="contact-section">
        <view class="section-title">联系信息</view>
        <view class="contact-grid">
          <view class="contact-card">
            <text class="card-title">派件员</text>
            <text class="card-value">{{ deliveryMan }}</text>
          </view>
          <view class="contact-card">
            <text class="card-title">代理点电话</text>
            <text class="card-value">{{ agentPhone }}</text>
          </view>
          <view class="contact-card">
            <text class="card-title">投诉电话</text>
            <text class="card-value">0771-4669229</text>
          </view>
          <view class="contact-card">
            <text class="card-title">取件地址</text>
            <text class="card-value">{{ pickupAddress }}</text>
          </view>
          <view class="contact-card">
            <text class="card-title">营业时间</text>
            <text class="card-value">09:00-21:30</text>
          </view>
        </view>
      </view> -->
    </template>
    <view class="none">{{ msg }}</view>
  </view>
</template>

<script lang="ts" setup>
import http from '@/utils/http'
import { onMounted, ref } from 'vue'
import Taro from '@tarojs/taro'

Taro.setNavigationBarTitle({
  title: "物流信息",
});

const none = ref<boolean>(false)
const msg = ref<string>('')
const params = Taro.getCurrentInstance().router?.params;
interface ExpressItem {
  time: string
  ftime: string
  context: string
}
const expressCodeMap = new Map([
  // 国内主流快递
  ["zhongtong", "中通速递"],
  ["yuantong", "圆通速递"],
  ["shentong", "申通快递"],
  ["yunda", "韵达快运"],
  ["shunfeng", "顺丰速运"],
  ["ems", "中国邮政EMS"],
  ["youzhengguonei", "邮政包裹"],
  ["jd", "京东物流"],
  ["debangwuliu", "德邦快递"],
  ["youshuwuliu", "优速快递"],

  // 国际快递
  ["dhl", "DHL国际件"],
  ["fedex", "联邦快递"],
  ["ups", "UPS全球件"],
  ["dhlen", "DHL德国件"],
  ["tnt", "TNT国际件"],
  ["usps", "美国邮政"],
  ["emsinten", "EMS国际英文结果"],

  // 专线物流
  ["kuayue", "跨越速运"],
  ["sfx", "顺丰快运"],
  ["ytexpress", "极兔速递"],
  ["ztky", "中铁快运"],
  ["annengwuliu", "安能快运"],

  // 特殊服务
  ["lntjs", "特急送"],
  ["gls", "GLS全球快递"],
  ["dhlde", "DHL德国件"],
  ["fedexcn", "FedEx中国件"],
  ["sf-express", "顺丰国际"]
]);
const expressData: ExpressItem[] = ref<any[]>([
  {
    "time": "2025-06-09 16:29:17",
    "ftime": "2025-06-09 16:29:17",
    "context": "【南宁市】 快件已由【彭日标，15778030930】送达【南宁良庆五象丽景小兵店】暂放，【取件地址：银岭路五象丽景西门1号，营业时间09:00-21:30】，请及时取件。物流问题无需找商家或平台，请联系业务员为您解决，或联系代理点：19897684183，投诉电话：0771-4669229"
  },
  {
    "time": "2025-06-09 15:59:08",
    "ftime": "2025-06-09 15:59:08",
    "context": "【南宁市】南宁大沙田分部 的业务员【彭日标,15778030930】正在为您派件（95720为中通快递员外呼专属号码，请放心接听。物流问题无需找商家或平台，请联系业务员为您解决，或联系网点：0771-4669229,投诉电话:0771-4669229）"
  },
  {
    "time": "2025-06-09 15:59:07",
    "ftime": "2025-06-09 15:59:07",
    "context": "【南宁市】 快件已到达 南宁大沙田分部（物流问题无需找商家或平台，请联系专属电话0771-4669229为您解决）"
  },
  {
    "time": "2025-06-09 13:25:55",
    "ftime": "2025-06-09 13:25:55",
    "context": "【南宁市】 快件已发往 南宁大沙田分部（物流问题无需找商家或平台，请联系专属电话95311为您解决）"
  },
  {
    "time": "2025-06-09 07:45:43",
    "ftime": "2025-06-09 07:45:43",
    "context": "【南宁市】 快件已到达 南宁转运中心（物流问题无需找商家或平台，请联系专属电话95311为您解决）"
  },
  {
    "time": "2025-06-08 00:09:41",
    "ftime": "2025-06-08 00:09:41",
    "context": "【上海市】 快件已发往 南宁转运中心（物流问题无需找商家或平台，请联系专属电话95311为您解决）"
  },
  {
    "time": "2025-06-08 00:08:29",
    "ftime": "2025-06-08 00:08:29",
    "context": "【上海市】 快件已到达 上海浦西转运中心（物流问题无需找商家或平台，请联系专属电话95311为您解决）"
  },
  {
    "time": "2025-06-07 21:10:51",
    "ftime": "2025-06-07 21:10:51",
    "context": "【上海市】 快件已发往 上海浦西转运中心（物流问题无需找商家或平台，请联系专属电话021-60665256为您解决）"
  },
  {
    "time": "2025-06-07 21:10:46",
    "ftime": "2025-06-07 21:10:46",
    "context": "【上海市】 快件已由 宝山罗南刘文杰（13402184894）揽收（物流问题无需找商家或平台，请联系专属电话021-60665256为您解决）"
  }
])

const expandedIndex = ref<number | null>(null)
const deliveryMan = '彭日标: 15778030930'
const agentPhone = '19897684183'
const pickupAddress = '银岭路五象丽景西门1号'

const formatTime = (time: string) => {
  return time.slice(5, 16) // 显示 "06-09 16:29"
}

const toggleExpand = (index: number) => {
  expandedIndex.value = expandedIndex.value === index ? null : index
}

const hasContactInfo = (text: string) => {
  return extractPhone(text) || extractAddress(text)
}

const extractPhone = (text: string) => {
  const phoneRegex = /1[3-9]\d{9}/g
  const matches = text.match(phoneRegex)
  return matches ? matches.join(' / ') : ''
}

const extractAddress = (text: string) => {
  const addressRegex = /取件地址：(.*?)，/
  const match = text.match(addressRegex)
  return match ? match[1] : ''
}

const com = ref("")
const nu = ref("")
onMounted(() => {
  http.postQuery('/api/userOrder/logistics', {
    orderId: '47' || params.id
  }).then((res) => {
    console.log("res", res)
    if (res.code == 0) {
      const obj = JSON.parse(res.data);
      console.log("obj", obj)
      if (obj.returnCode == 500) {
        none.value = true;
        msg.value = obj.message
      }
      else {
        expressData.value = obj.data;
        com.value = expressCodeMap.get(obj.com) || obj.com;
        nu.value = obj.nu;
      }

    }
  })
})
</script>

<style lang="scss">
.express-container {
  padding: 20rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

  .express-header {
    background: linear-gradient(135deg, #1e88e5, #0d47a1);
    border-radius: 16rpx;
    padding: 24rpx;
    margin-bottom: 20rpx;
    color: white;

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10rpx;

      .title {
        font-size: 36rpx;
        font-weight: bold;
      }

      .status {
        font-size: 28rpx;
        color: #4CAF50;
        background-color: rgba(255, 255, 255, 0.2);
        padding: 6rpx 16rpx;
        border-radius: 20rpx;
      }
    }

    .header-subtitle {
      font-size: 24rpx;
      opacity: 0.9;
    }
  }

  .current-status {
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 24rpx;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

    .status-icon {
      width: 80rpx;
      height: 80rpx;
      background-color: #E8F5E9;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20rpx;

      .icon {
        color: #4CAF50;
        font-size: 40rpx;
        font-weight: bold;
      }
    }

    .status-content {
      flex: 1;

      .status-desc {
        display: block;
        font-size: 32rpx;
        color: #333;
        margin-bottom: 8rpx;
        font-weight: 500;
      }

      .status-address {
        font-size: 26rpx;
        color: #666;
      }
    }
  }

  .timeline {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    position: relative;
    margin-bottom: 30rpx;

    &::before {
      content: '';
      position: absolute;
      top: 40rpx;
      bottom: 40rpx;
      left: 44rpx;
      width: 2rpx;
      background-color: #e0e0e0;
      z-index: 1;
    }

    .timeline-item {
      position: relative;
      padding-left: 80rpx;
      padding-bottom: 30rpx;

      &:last-child {
        padding-bottom: 0;
      }

      &.active {
        .timeline-dot {
          background-color: #4CAF50;
          border: 4rpx solid #E8F5E9;
          width: 24rpx;
          height: 24rpx;
          left: 38rpx;
        }
      }

      .timeline-dot {
        position: absolute;
        left: 40rpx;
        width: 16rpx;
        height: 16rpx;
        border-radius: 50%;
        background-color: #1e88e5;
        border: 4rpx solid white;
        z-index: 2;
        top: 8rpx;
      }

      .timeline-content {
        .time {
          display: block;
          font-size: 24rpx;
          color: #999;
          margin-bottom: 10rpx;
        }

        .content {
          font-size: 28rpx;
          color: #333;
          line-height: 1.6;
          position: relative;
          padding-right: 40rpx;

          .expand-icon {
            position: absolute;
            right: 0;
            top: 0;
            color: #999;
            font-size: 24rpx;
          }
        }

        .contact-info {
          margin-top: 20rpx;
          padding: 20rpx;
          background-color: #f9f9f9;
          border-radius: 8rpx;

          .contact-item {
            display: flex;
            align-items: center;
            margin-bottom: 10rpx;
            font-size: 26rpx;
            color: #666;

            .icon {
              margin-right: 10rpx;
            }

            &:last-child {
              margin-bottom: 0;
            }
          }
        }
      }
    }
  }

  .contact-section {
    .section-title {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
      padding-left: 10rpx;
    }

    .contact-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20rpx;

      .contact-card {
        background-color: #fff;
        border-radius: 12rpx;
        padding: 20rpx;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

        .card-title {
          display: block;
          font-size: 24rpx;
          color: #999;
          margin-bottom: 8rpx;
        }

        .card-value {
          font-size: 28rpx;
          color: #333;
          font-weight: 500;
        }
      }
    }
  }

  .none {
    text-align: center;
    font-size: 28rpx;
    color: #999;
    padding: 30rpx;
  }
}
</style>
